<template>
	<view>
		<view style="width: 100vw; height: 100vh; background: #5baf5c; overflow: hidden;">
			<view class="myCode">
				<view class="myCode_head">
					<image class="login_img" :src="userInfo ? userInfo.avatar : '../../static/img/loginimg.png'"
						mode="">
					</image>
					<p class="login_user">{{userInfo ? userInfo.name : "普通用户"}}</p>
				</view>
				<p>卡号:{{cardInfo.number}}</p>
			</view>
			<view class="myCode_content">
				<img :src="cardInfo.code" mode=""></img>
				<p>二维码每30秒自动更新，请在店内消费使用</p>
			</view>
			<view class="myCode_foot">
				<view class="myCode_text">
					<p>余额</p>
					<p>{{cardInfo ? cardInfo.money : "---"}}</p>
				</view>
				<view class="myCode_text">
					<p>积分</p>
					<p>{{cardInfo ? cardInfo.integral : "---"}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from "@/api/user.js"
	export default {
		data() {
			return {
				userInfo: "",
				cardInfo: "",
				timer: null,
			};
		},
		onLoad() {
			if (uni.getStorageSync("data")) {
				this.userInfo = uni.getStorageSync("data").data.userInfo
			}
			this.getMyCode()
		},
		mounted() {
			this.startTimer()
		},
		beforeDestroy() {
			// 在组件销毁前清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			//调取卡的基本信息
			getMyCode() {
				user.serviceCode(uni.getStorageSync("data").data.userInfo.id).then(res => {
					if (res.code == 0) {
						this.cardInfo = res.data
					}
				})
			},
			//每六十秒调一次
			startTimer() {
				this.timer = setInterval(() => {
					this.getMyCode();
				}, 60000);
			}
		}
	}
</script>

<style lang="scss">
	.myCode {
		width: 710rpx;
		height: 560rpx;
		background: white;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		margin: 60rpx auto 30rpx;
		text-align: center;
		overflow: hidden;

		.myCode_head {
			position: absolute;
			left: 24%;
			top: 0%;
			text-align: center;
			width: 50%;


			image {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}

			p:nth-child(2) {
				font-size: 28rpx;
			}


		}

		>p {
			font-size: 24rpx;
			color: #7F7F7F;
			margin-top: 18%;
		}

	}

	.myCode_content {
		position: absolute;
		top: 16%;
		left: 30%;
		width: 100%;

		image {
			width: 292rpx;
			height: 292rpx;
		}

		>p {
			font-size: 24rpx;
			color: #7F7F7F;
			position: absolute;
			top: 104%;
			left: -10%;
		}
	}

	.myCode_foot {
		width: 710rpx;
		height: 158rpx;
		border-radius: 0rpx 0rpx 28rpx 28rpx;
		background: white;
		margin: 0 auto;
		display: flex;

		.myCode_text {

			width: 50%;
			text-align: center;
			line-height: 46rpx;
			margin-top: 35rpx;

			p:nth-child(1) {
				font-size: 24rpx;
				color: #7F7F7F;
			}

			p:nth-child(2) {
				font-size: 28rpx;
			}
		}
	}
</style>